<template>
  <div class="app-container">
    <div class="main-container">
      <div class="page-header">
        <router-link to="/main/biao/huishen" class="back-btn">
          <i class="el-icon-arrow-left"></i> 返回</router-link>
        <div class="left-section">
          <h2 class="page-title">文件会审列表</h2>
        </div>
        <div class="right-section">
          <router-link to="/main/biao/huishen">
            <el-button type="primary" icon="el-icon-plus">新增会审</el-button>
          </router-link>
        </div>
      </div>

      <div class="content-wrapper">
        <div class="filter-container">
          <el-input
            v-model="listQuery.keyword"
            placeholder="请输入文件编号/名称/申请部门"
            class="filter-item search-input"
            @keyup.enter.native="handleFilter"
            clearable
          >
            <el-button slot="append" icon="el-icon-search" @click="handleFilter"></el-button>
          </el-input>
        </div>

        <el-card class="table-card" shadow="hover">
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            stripe
            highlight-current-row
            :header-cell-style="tableHeaderStyle"
            :cell-style="tableCellStyle"
          >
            <el-table-column align="center" label="序号" width="80" type="index" :index="indexMethod">
            </el-table-column>
            <el-table-column label="文件编号" prop="fileNumber" min-width="120" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="文件名称" prop="fileName" min-width="180" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="申请部门" prop="applicationDepartment" min-width="120" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="编制/修订" prop="compilationRevision" min-width="120" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="方式" prop="reviewType" min-width="100" align="center">
              <template slot-scope="{row}">
                <el-tag :type="getReviewTypeType(row.reviewType)">
                  {{ formatReviewType(row.reviewType) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="主要目的" prop="mainPurpose" min-width="200" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" align="center" width="280" fixed="right">
              <template slot-scope="{row}">
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(row)">
                  编辑
                </el-button>
                <el-button type="success" size="mini" icon="el-icon-view" @click="handleView(row)">
                  查看
                </el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="listQuery.current"
              :limit.sync="listQuery.size"
              @pagination="getList"
            />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getFileReviewList, deleteFileReview } from '@/api/fileReview'
import Pagination from '@/components/Pagination'

export default {
  name: 'HuishenList',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10,
        keyword: ''
      },
      tableHeaderStyle: {
        background: '#f5f7fa',
        color: '#303133',
        fontWeight: '600',
        height: '50px',
        padding: '0',
        textAlign: 'center'
      },
      tableCellStyle: {
        padding: '8px 0',
        textAlign: 'center'
      },
      reviewTypeMap: {
        new: { label: '新订', type: 'success' },
        revision: { label: '修订', type: 'warning' },
        abrogation: { label: '废止', type: 'danger' }
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getFileReviewList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },
    handleUpdate(row) {
      this.$router.push(`/main/biao/huishen?id=${row.id}&type=edit`)
    },
    handleView(row) {
      this.$router.push(`/main/biao/huishen?id=${row.id}&type=view`)
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFileReview(row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      })
    },
    indexMethod(index) {
      return (this.listQuery.current - 1) * this.listQuery.size + index + 1
    },
    formatReviewType(type) {
      return this.reviewTypeMap[type]?.label || '未知类型'
    },
    getReviewTypeType(type) {
      return this.reviewTypeMap[type]?.type || 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  // background-color: #f0f2f5;
  min-height: 100vh;
}

.main-container {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background-color: #fff;
  padding: 16px 24px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #303133;
  }
}

.content-wrapper {
  background-color: transparent;
}

.filter-container {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .search-input {
    width: 360px;
  }

  .filter-item {
    margin-right: 10px;
  }
}

.table-card {
  margin-bottom: 20px;
  border-radius: 4px;

  :deep(.el-card__body) {
    padding: 20px;
  }
}

.pagination-container {
  padding: 20px 0 0;
  text-align: right;
}

:deep(.el-table) {
  border-radius: 4px;
  
  &::before {
    display: none;
  }

  .el-table__header-wrapper {
    border-radius: 4px 4px 0 0;
  }
}

:deep(.el-button) {
  padding: 8px 15px;
  margin-left: 8px;

  [class*="el-icon-"] + span {
    margin-left: 4px;
  }

  &.el-button--mini {
    padding: 7px 12px;
  }
}

:deep(.el-input) {
  .el-input__inner {
    border-radius: 4px;
  }
}

:deep(.el-pagination) {
  padding: 0;
  margin-top: 20px;
}
</style> 